<script setup>
import { watch } from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";

const route = useRoute();

watch(
  () => route.params.id,
  (newId, oldId) => {
    // 对路由变化做出响应...
    console.log("oldId", oldId);
    console.log("newId", newId);
  },
);

onBeforeRouteUpdate(async (to, from) => {
  // 对路由变化做出响应...
  if (to.params.id == "333") console.log("id=333");
});
</script>

<template>
  post.vue User {{ $route.params.id }}

  <RouterLink to="/system/users/222">user_222</RouterLink>
  <RouterLink to="/system/users/333">user_333</RouterLink>
  <RouterLink to="/system/users/444">user_444</RouterLink>
  <br/>
  <router-view />
</template>

<style scoped></style>
